<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/common/header.jsp"%>
<c:set var="path" value="../..${ctx}/define/dbmeta" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pagination 分页表格</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link href="${ctx}/demo/demo.css" rel="stylesheet" type="text/css" />
<script src="${ctx}/scripts/boot.js" type="text/javascript"></script>
<script src="${ctx}/common/common.js" type="text/javascript"></script>
<style type="text/css">
html,body {
	margin: 0;
	padding: 0;
	border: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
</style>
</head>
<body>

	<div class="mini-splitter" style="width: 100%; height: 100%;">
		<!-- 左侧菜单树 -->
		<div size="240" showCollapseButton="true">
			<!-- 顶部按钮 -->
			<div class="mini-toolbar" style="padding: 2px; border-top: 0; border-left: 0; border-right: 0;">
				<a class="mini-button" iconCls="icon-add" plain="true" onclick="addDatabase()">新增</a> 
				<a class="mini-button" iconCls="icon-remove" plain="true" onclick="removeDatabase()">删除</a> 
				<span class="separator"></span>
				<a class="mini-button" iconCls="icon-save" plain="true" onclick="saveDatabase()">保存</a>
			</div>
			<!-- 中间树内容 -->
			<div class="mini-fit">
				<ul id="tree1" class="mini-tree"  
					style="width: 100%;" showTreeIcon="true" textField="name"
					idField="id" parentField="pid" resultAsTree="false">
				</ul>
			</div>
		</div>

		<!--中间内容表格 -->
		<div showCollapseButton="true">
			<div class="mini-toolbar" style="padding: 2px; border-top: 0; border-left: 0; border-right: 0;">
				<a class="mini-button" iconCls="icon-add" plain="true" onclick="addRow()">新增</a> 
				<a class="mini-button" iconCls="icon-remove" plain="true" onclick="removeRow()">删除</a> 
				<span class="separator"></span> 
				<a class="mini-button" iconCls="icon-save" plain="true" onclick="saveData()">保存</a>
			</div>
			<div class="mini-fit">
				<div id="grid1" class="mini-datagrid"
					style="width: 100%; height: 100%;" borderStyle="border:0;"
					url="${path}/get.html"
					allowCellSelect="true" allowCellEdit="true" allowSortColumn="false" showPager="false" showModified="true">
					<div property="columns">
						<div name="name" field="name" headerAlign="center" allowSort="true" width="150">
							类型名称 <input property="editor" class="mini-textbox" style="width: 100%;" minWidth="200" />
						</div>
						<div name="dbType" field="dbType" headerAlign="center" allowSort="true" width="150">
							数据库类型 <input property="editor" class="mini-textbox" style="width: 100%;" minWidth="200" />
						</div>
						<div name="javaType" field="javaType" headerAlign="center" allowSort="true" width="150">
							JAVA类型 <input property="editor" class="mini-textbox" style="width: 100%;" minWidth="200" />
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
<script type="text/javascript">
	// 初始化
	mini.parse();
	var tree = mini.get("tree1");
	var grid = mini.get("grid1");
	tree.load("${path}/tree.html");
	//tree.loadList(database_names_tree,"id","pid");
	grid.load();

	/**
	 * 左侧目录树的鼠标点击事件
	 */
	tree.on("nodeselect", function(e) {
		if (e.isLeaf) {
			grid.load({
				name : e.node.id
			});
		} else {
			grid.setData([]);
			grid.setTotalCount(0);
		}
	});

	/**
	 * 新增字段定义
	 */
	function addRow() {
		var node = tree.getSelectedNode();
		if (node) {
			var newRow = {};
			newRow.databaseName = node.name;
			grid.addRow(newRow, grid.getData().length);
		}
	}

	/**
	 * 删除字段定义
	 */
	function removeRow() {
		var rows = grid.getSelecteds();
		if (rows.length > 0) {
			grid.removeRows(rows, true);
		}
	}

	/**
	 * 保存字段定义
	 */
	function saveData() {
		var data = grid.getChanges();
		var json = mini.encode(data);
		var node = tree.getSelectedNode();
		var databaseName = node.id;
		grid.loading("保存中，请稍后......");
		$.ajax({
			url : "${path}/save.html",
			data : {
				databaseName : databaseName,
				data : json
			},
			type : "post",
			success : function(text) {
				grid.reload();
			},
			error : function(jqXHR, textStatus, errorThrown) {
				// alert(jqXHR.responseText);
				mini.showMessageBox({
					title : "错误",
					message : jqXHR.responseText,
					buttons : [ "ok" ],
					iconCls : "mini-messagebox-error"
				});
				grid.unmask();
			}
		});
	}

	/**
	 * 新增数据库类型定义
	 */
	function addDatabase() {
		mini.prompt("请输入数据库名称：", "请输入", function(action, value) {
			if (action == "ok") {
				$.ajax({
					url : "${path}/addDatabase.html",
					data : {
						name : value
					},
					type : "post",
					success : function(text) {
						var node = tree.getNode("all");
						var newNode = {
							name : value,
							id : value,
							pid : "all"
						};
						tree.addNode(newNode, "add", node);
					},
					error : function(jqXHR, textStatus, errorThrown) {
						mini.showMessageBox({
							title : "错误",
							message : jqXHR.responseText,
							buttons : [ "ok" ],
							iconCls : "mini-messagebox-error"
						});
					}
				});
			}
		});
	}

	/**
	 * 删除数据库类型定义
	 */
	function removeDatabase() {
		mini.confirm("确定删除记录？", "确定？", function(action) {
			if (action == "ok") {
				var node = tree.getSelectedNode();
				$.ajax({
					url : "${path}/deleteDatabase.html",
					data : {
						name : node.id
					},
					type : "post",
					success : function(text) {
						tree.removeNode(node);
					},
					error : function(jqXHR, textStatus, errorThrown) {
						mini.showMessageBox({
							title : "错误",
							message : jqXHR.responseText,
							buttons : [ "ok" ],
							iconCls : "mini-messagebox-error"
						});
					}
				});
			}
		});
	}

	/**
	 * 保存数据库类型定义
	 */
	function saveDatabase() {
		$.ajax({
			url : "${path}/saveDatabase.html",
			data : {},
			type : "post",
			success : function(json) {
				mini.showMessageBox({
					title : "提示",
					message : json.message,
					buttons : [ "ok" ],
					iconCls : "mini-messagebox-info"
				});
			},
			error : function(jqXHR, textStatus, errorThrown) {
				mini.showMessageBox({
					title : "错误",
					message : jqXHR.responseText,
					buttons : [ "ok" ],
					iconCls : "mini-messagebox-error"
				});
			}
		});
	}
</script>

</body>
</html>